<!--
 * @Description: 
 * @Author: HYH
 * @LastEditors: HYH
 * @LastEditTime: 2023-05-27 18:42:24
-->
<template>
  <div class="flex-1 flex m-6 p-3 bg-stone-200 rounded-xl overflow-auto">
    <!-- 项目列表 -->
    <div>
      <ul class="menu menu-compact bg-base-100 w-56 p-2 rounded-box">
        <li class="menu-title !text-gray-800 py-1 !text-2xl font-bold">
          <a>项目</a>
        </li>
        <li v-for="(item, index) in projectList" :key="index">
          <a @click="getDetail(item.value)">{{ item.label }}</a>
        </li>
      </ul>
    </div>
    <div class="flex-1 flex bg-white ml-3 p-3 rounded-md overflow-auto">
      <!--tree -->
      <div class="w-[250px] overflow-auto" v-if="data">
        <el-tree
          :data="data"
          :props="{ children: 'children', label: 'label' }"
          accordion
          @node-click="handleNodeClick"
        />
      </div>
      <div class="w-[calc(100%-230px)]" v-if="content">
        <div contenteditable class="p-3 bg-gray-100 overflow-auto h-full rounded-md outline-none">
          <pre v-html="content" />
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { http } from '@/http'
interface IProject {
  label: string
  value: string
}
interface Tree {
  label: string
  children?: Tree[]
  type?: 'file' | 'dir'
  key?: string
}
const content = ref<string>('')
const fileName = ref<string>('')
const projectList = ref<IProject[]>([])
const data = ref<Tree>()
const handleNodeClick = (data: Tree) => {
  if (data.type == 'file') {
    fileName.value = data.key.split('/').pop()
    http.post<string>('/api/onlineEditor/getFile', { path: data.key }).then(res => {
      content.value = res.data
    })
  }
}
const getDetail = (value: string) => {
  http.post<Tree>('/api/onlineEditor/getFileTree', { path: value }).then(res => {
    data.value = res.data
  })
}
onMounted(() => {
  http.post<IProject[]>('/api/onlineEditor').then(res => {
    projectList.value = res.data
  })
})
</script>
<style lang="scss" scoped>
</style>
